<!-- detail -->
<template>
  <view class="nav">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <image src="/static/information/back.png" class="back" @click="navigateBack"></image>
      <image src="/static/information/more.png" class="more"></image>
	 
    </view>
  </view>
  
  <view style="font-size: 44rpx;margin-bottom: 20rpx;margin-left: 32rpx;">{{ detailData.news_title }}</view>
  <view style="font-size: 32rpx; color: #6b6b6b;margin-left: 32rpx;">{{ detailData.news_publish_time }} </view>
  <view class="passage">
  <!-- 图文资讯（883） -->
  <rich-text 
    v-if="detailData.news_type === '883'"
    class="content"
    :nodes="processedContent"
  ></rich-text>
  </view>
  <!-- 图集资讯 （884） -->
  <view class="imgs">
  	  <view v-if="detailData.news_type === '884'">
  		  <view class="imgs-box">
  		    <swiper 
  		      :current="currentIndex" 
  		      @change="onSwiperChange"
  		      autoplay="true">
  		      <swiper-item
  			   v-for="(item, index) in processedImgs" 
  			   :key="index"
  			  >
  		        <image 
  				:src="item.fullUrl" 
  				mode="aspectFill"
  				style="width: 100%; height: 100%;"
  				></image>
  		      </swiper-item>
  		    </swiper>
  		  </view>
  		  <view class="t-n">
  		    <!-- 图片名称以及左右箭头导航 -->
  		    <view class="img-title" style="font-size: 28rpx;">图片名称</view>
  		    <view class="l-r">
  		      <image 
  		        src="/static/information/left.png" 
  		        class="left" 
  		        @click="prevImage"></image>
  		      <text style="font-size: 24rpx;">{{ currentIndex + 1 }}/{{ processedImgs.length }}</text>
  		      <image 
  		        src="/static/information/right.png" 
  		        class="right" 
  		        @click="nextImage"></image>
  		    </view>
  	  </view>
  </view>
  </view>
  
  <!-- 视频资讯 （885） -->
  <view class="video">
  	  <view v-if="detailData.news_type === '885'">
		  <view>
			  <video 
			   :src="detailData.news_video"
			    controls
			    style="width: 686rpx; height: 626rpx;"
			  ></video>
			  
		  </view>
	  </view>
  </view>
  
  <view class="custom-tabbar">
  	<view class="avatar-name">
  		<!-- <image :src="item.profilePhoto"></image>
  		<text>{{item.name}}</text> -->
  	</view>
  	<view 
  	class="icons"
  	v-for="icon in AllIcons.icons"
  	:key="icon.id"
	@click="handleIconClick(icon.type, detailData.statistics)"
	>
  		
  		<text>{{
  			icon.type === "click" ? detailData.statistics.clicked_num :
  			icon.type === "like" ? detailData.statistics.liked_num :
  			icon.type === "comment" ? detailData.statistics.comment_num :
  			icon.type === "subscribe" ? detailData.statistics.subscribe_num :
  			detailData.statistics.shared_num
  		}}</text>
  		<image 
		:src="icon.src"
		:class="{
		    'active': 
		      (icon.type === 'like' && detailData.statistics.is_liked === '1') || 
		      (icon.type === 'subscribe' && detailData.statistics.is_subscribe === '1')
		  }"
		></image>
  	</view>
  	
  </view>
 
</template>

<script setup>
import { ref,reactive, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import decInformationApi from '../../../../api/dec/decIndex/decInformationApi'
import cryptoUtils from '/utils/CryptoJS';
const detailData = ref({})
const currentIndex = ref(0)
const newsId = ref('')
const AllIcons = reactive({
	  icons: [
	    { id: 1, src: "/static/information/view.png", type: "click" },
	    { id: 2, src: "/static/information/like.png", type: "like" },
	    { id: 3, src: "/static/information/comment.png", type: "comment" },
	    { id: 4, src: "/static/information/subscribe.png", type: "subscribe" },
	    { id: 5, src: "/static/information/share.png", type: "share" }
	  ],
	});
// 页面初始化
onLoad((options) => {
	
  fetchDetail(options.id)
})


// const fetchDetail = async (newsId) => {
// 	// 动态拼接URL，将news_id作为查询参数
//   const url = `http://qmdd.gf41.gfinter.net/admin/qmdd2018/index.php?r=io_club_news/get_news_detail&news_id=${newsId}`;
//   const res = await uni.request({
//     url: url,
//     method: 'POST',
//     data: { news_id: newsId },
	
//   })
  
//   if (res.data.error === 0) {
// 	detailData.value = res.data.datas
// 	console.log(detailData.value)
// 	// console.log(detailData.value.statistics)
//     // 确保pics字段为字符串（接口可能返回空）
//     if (!detailData.value.pics) detailData.value.pics = ''
//   }
// }
const fetchDetail = async(newsId) => {
	let params = {
		news_id: newsId
	};
	const res = await decInformationApi.GF_get_news_detail_API(params)
	console.log('res1:',res)
	console.log('asdasas',typeof res)
	
	
	
	console.log('123436yuthgf', cryptoUtils.Base64Decrypt(res.datas.news_content))
	// // console.log('res.error:',res.error)
	// if(res.error === 0){
	// 	detailData.value = res.datas
	// 	console.log('res2:',res)
	// 	console.log('res.datas:',res.datas)
	// }
	
}
// 解码后的文章内容
// 处理图标点击
		const handleIconClick = (type, data) => {
		  if (type === 'like') {
		    data.is_liked = data.is_liked === "1" ? "0" : "1";
		    if (data.is_liked === "1") {
		      data.statistics.liked_num++;
		    } else {
		      data.statistics.liked_num--;
		    }
		  } else if (type === 'subscribe') {
		    data.is_subscribe = data.is_subscribe === "1" ? "0" : "1";
		    if (data.is_subscribe === "1") {
		      data.statistics.subscribe_num++;
		    } else {
		      data.statistics.subscribe_num--;
		    }
		  }
		};


//图集资讯切换轮播图

// 获取图片
const processedImgs = computed(() => {
  if (!detailData.value.news_pics) return []
  return detailData.value.news_pics.map(item => ({
    ...item,
    fullUrl: `https://upload.gfinter.net/${item.pic_url}`
  }))
})



// 监听 swiper 切换事件
const onSwiperChange = (event) => {
  currentIndex.value = event.detail.current;
};

// 切换到上一张图片
const prevImage = () => {
  if (currentIndex.value > 0) {
    currentIndex.value--;
  }
};

// 切换到下一张图片
const nextImage = () => {
  if (currentIndex.value < getImgs.Imgs.length - 1) {
    currentIndex.value++;
  }
};

// 返回上一页
const navigateBack = () => {
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>

.nav {
  .nav-bar {
    display: flex;
    padding: 32rpx;
    background-color: #fff;
    justify-content: space-between; // 将子元素分布在容器的两端
    align-items: center; // 垂直居中对齐
  }

  .back {
    height: 36rpx;
    width: 36rpx;
  }

  .more {
    height: 48rpx;
    width: 48rpx;
  }
}	
	
.passage{
	display: flex;
	flex-direction: column;
	
	margin-top: 12rpx;
}

.video{
	width: 686rpx;
	height: 626rpx;
	margin: 256rpx auto;
}


.imgs {
  display: flex;
  flex-direction: column;
  margin: 10rpx 30rpx;

  .imgs-box {
    width: 100%; // 宽度填满父容器
    height: 623rpx; // 设置明确的高度
    margin-top: 250rpx; // 调整与上方内容的间距

    swiper {
      width: 100%;
      height: 100%; // swiper 填满父容器
    }

    image {
      width: 100%;
      height: 100%;
    }
  }

  .t-n {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20rpx;

    .l-r {
      display: flex;
      align-items: center;
      gap: 20rpx;

      image {
        height: 24rpx;
        width: 24rpx;
      }

      text {
        font-size: 28rpx;
        color: #878787;
      }
    }
  }
}

.custom-tabbar{
		display:flex;
		justify-content: space-between;
		align-items: center;
		
		margin:auto 40rpx;
		height: 130rpx;
		position: fixed; // 固定在页面底部
		bottom: 0; // 紧贴页面底部
		left: 0;
		right: 0;
		z-index: 1000; // 确保 tabbar 在最上层
		// .avatar-name{
		// 	display: flex;
		// 	image{
		// 		padding-right: 5rpx;
		// 		width: 40rpx;
		// 		height: 40rpx;
		// 		border-radius: 50%;
		// 	}
		// }
		.icons{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			image{
				width: 30rpx;
				height: 30rpx;
				&.active {
				  filter: brightness(0) saturate(100%) invert(44%) sepia(98%) saturate(1239%) hue-rotate(353deg) brightness(98%) contrast(101%);
				  // // /* 或者直接修改颜色（如果图片是 SVG） */
				  // fill: #FA6409;
				}
			}
			text{
				font-size: 20rpx;
			}
		}
	}
</style>